{% extends 'layout.html' %}

{% load static %}

{% block title %} 小帕 {% endblock %}
{% block homeactive %}active{% endblock %}

{% block contect %}

  <main class="main">
    <!-- Hero Section -->
    <section id="hero" class="hero section">
      <div class="hero-bg">
        <img src="{% static 'img/hero-bg-light.webp' %}" alt="">
      </div>
      <div class="container text-center">
        <div class="d-flex flex-column justify-content-center align-items-center">
          <h1 data-aos="fade-up">PaSystem <span>产品主页</span></h1>
          <p data-aos="fade-up" data-aos-delay="100">专注于心理辅助大众化<br></p>
          <div class="d-flex" data-aos="fade-up" data-aos-delay="200">
            <a href="{% url 'service' %}" class="btn-get-started">Demo</a>
<!--            <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a>-->
          </div>
          <img src="{% static 'img/tabs-3.jpg' %}" class="img-fluid hero-img" alt="" data-aos="zoom-out" data-aos-delay="300">
        </div>
      </div>

    </section><!-- /Hero Section -->

    <!-- Featured Services Section -->
    <section id="featured-services" class="featured-services section light-background">

      <div class="container">

        <div class="row gy-4">

          <div class="col-xl-4 col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <div class="service-item d-flex">
              <div class="icon flex-shrink-0"><i class="bi bi-briefcase"></i></div>
              <div>
                <h4 class="title"><a href="#" class="stretched-link">机器人小帕</a></h4>
                <p class="description">小帕可以捕捉用户信息将用户状态发至云服务器，并能根据用户展露的情感给与不同的响应进行共情。</p>
              </div>
            </div>
          </div>
          <!-- End Service Item -->

          <div class="col-xl-4 col-lg-6" data-aos="fade-up" data-aos-delay="200">
            <div class="service-item d-flex">
              <div class="icon flex-shrink-0"><i class="bi bi-card-checklist"></i></div>
              <div>
                <h4 class="title"><a href="#" class="stretched-link">信息处理</a></h4>
                <p class="description">机器人发送至云服务器的信息将通过NLP进行处理并通过LLM给出从业者初步的建议。</p>
              </div>
            </div>
          </div><!-- End Service Item -->

          <div class="col-xl-4 col-lg-6" data-aos="fade-up" data-aos-delay="300">
            <div class="service-item d-flex">
              <div class="icon flex-shrink-0"><i class="bi bi-bar-chart"></i></div>
              <div>
                <h4 class="title"><a href="#" class="stretched-link">精准分析</a></h4>
                <p class="description">多模态的理解能力能让小帕精准掌握用户的状态。</p>
              </div>
            </div>
          </div><!-- End Service Item -->

        </div>

      </div>

    </section><!-- /Featured Services Section -->

    <!-- About Section -->
    <section id="about" class="about section">

      <div class="container">

        <div class="row gy-4">

          <div class="col-lg-6 content" data-aos="fade-up" data-aos-delay="100">
            <p class="who-we-are">产品介绍</p>
            <h3>PaSystem</h3>
            <p class="fst-italic">
              心理辅助系统包括智能软件平台和嵌入式心理健康机器人两大业务体系。该系统结合了人脸检测、大语言模型（LLM）和自然语言处理（NLP）等技术，为心理咨询师和学生提供交互式、多模态的心理评估与支持。
            </p>
            <ul>
              <li><i class="bi bi-check-circle"></i> <span>通过香橙派AI Pro主板完成机器人开发</span></li>
              <li><i class="bi bi-check-circle"></i> <span>使用Django作为网络框架</span></li>
              <li><i class="bi bi-check-circle"></i> <span>模型训练通过MindSpore与PyTorch框架完成</span></li>
              <li><i class="bi bi-check-circle"></i> <span>使用Keras完成自然语言处理</span></li>
            </ul>
            <a href="#" class="read-more"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
          </div>

          <div class="col-lg-6 about-images" data-aos="fade-up" data-aos-delay="200">
            <div class="row gy-4">
              <div class="col-lg-6">
                <img src="{% static 'img/about-company-1.jpg' %}" class="img-fluid" alt="">
              </div>
              <div class="col-lg-6">
                <div class="row gy-4">
                  <div class="col-lg-12">
                    <img src="{% static 'img/about-company-2.jpg' %}" class="img-fluid" alt="">
                  </div>
                  <div class="col-lg-12">
                    <img src="{% static 'img/about-company-3.jpg' %}" class="img-fluid" alt="">
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </section><!-- /About Section -->

    <!-- Clients Section -->
    <section id="clients" class="clients section">

      <div class="container" data-aos="fade-up">

        <div class="row gy-4">

          <div class="col-xl-2 col-md-3 col-6 client-logo">
            <img src="{% static 'img/clients/Client.svg' %}" class="img-fluid" alt="">
          </div><!-- End Client Item -->

          <div class="col-xl-2 col-md-3 col-6 client-logo">
            <img src="https://www.mindspore.cn/_static/logo-zh-dark.6eb00c08.svg" class="img-fluid" alt="">
          </div><!-- End Client Item -->

          <div class="col-xl-2 col-md-3 col-6 client-logo">
            <img src="{% static 'img/clients/Client2.svg' %}" class="img-fluid" alt="">
          </div><!-- End Client Item -->

          <div class="col-xl-2 col-md-3 col-6 client-logo">
            <img src="https://static.djangoproject.com/img/logos/django-logo-positive.svg" class="img-fluid" alt="">
          </div><!-- End Client Item -->

          <div class="col-xl-2 col-md-3 col-6 client-logo">
            <img src="{% static 'img/clients/Client3.png' %}" class="img-fluid" alt="">
          </div><!-- End Client Item -->

          <div class="col-xl-2 col-md-3 col-6 client-logo">
            <img src="{% static 'img/clients/Client4.png' %}" class="img-fluid" alt="">
          </div><!-- End Client Item -->

        </div>

      </div>

    </section><!-- /Clients Section -->

    <!-- Features Section -->
    <section id="features" class="features section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>特点</h2>
        <p>专为心理情绪调节设计</p>
      </div><!-- End Section Title -->

      <div class="container">
        <div class="row justify-content-between">

          <div class="col-lg-5 d-flex align-items-center">

            <ul class="nav nav-tabs" data-aos="fade-up" data-aos-delay="100">
              <li class="nav-item">
                <a class="nav-link active show" data-bs-toggle="tab" data-bs-target="#features-tab-1">
                  <i class="bi bi-binoculars"></i>
                  <div>
                    <h4 class="d-none d-lg-block">精准</h4>
                    <ul>
                      <li>集成心理量表</li>
                      <li>多种图表分析</li>
                      <li>多模态AI云端辅助</li>
                    </ul>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-2">
                  <i class="bi bi-box-seam"></i>
                  <div>
                    <h4 class="d-none d-lg-block">智能</h4>
                    <ul>
                      <li>捕捉表情判断真实性</li>
                      <li>云端助理给出针对性建议</li>
                      <li>大语言模型集成，智能助手辅助</li>
                    </ul>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-3">
                  <i class="bi bi-brightness-high"></i>
                  <div>
                    <h4 class="d-none d-lg-block">本地化</h4>
                    <ul>
                      <li>华为生态集成</li>
                      <li>香橙派AI pro算力支持</li>
                      <li>Mindspore深度学习算法</li>
                    </ul>
                  </div>
                </a>
              </li>
            </ul><!-- End Tab Nav -->

          </div>

          <div class="col-lg-6">

            <div class="tab-content" data-aos="fade-up" data-aos-delay="200">

              <div class="tab-pane fade active show" id="features-tab-1">
                <img src="{% static 'img/tabs-1.jpg' %}" alt="" class="img-fluid">
              </div><!-- End Tab Content Item -->

              <div class="tab-pane fade" id="features-tab-2">
                <img src="{% static 'img/tabs-2.jpg' %}" alt="" class="img-fluid">
              </div><!-- End Tab Content Item -->

              <div class="tab-pane fade" id="features-tab-3">
                <img src="{% static 'img/tabs-3.jpg' %}" alt="" class="img-fluid">
              </div><!-- End Tab Content Item -->
            </div>

          </div>

        </div>

      </div>

    </section><!-- /Features Section -->

    <!-- Features Details Section -->
    <section id="features-details" class="features-details section">

      <div class="container">

        <div class="row gy-4 justify-content-between features-item">

          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <img src="{% static 'img/features-1.jpg' %}" class="img-fluid" alt="">
          </div>

          <div class="col-lg-5 d-flex align-items-center" data-aos="fade-up" data-aos-delay="200">
            <div class="content">
              <h3>对用户更亲切</h3>
              <p>
                小帕友好的机器人外壳以及友好的发言模式能让用户更容易接受小帕，并对它吐露心扉，可爱的样貌多变的表情以及柔和的动作能够使他更加友善。
              </p>
              <a href="#" class="btn more-btn">用户</a>
            </div>
          </div>

        </div><!-- Features Item -->

        <div class="row gy-4 justify-content-between features-item">

          <div class="col-lg-5 d-flex align-items-center order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">

            <div class="content">
              <h3>对从业者更友善</h3>
              <p>
                使用多种AI算法并通过小帕助理根据大语言模型给出更精准的建议，让从业者能直接把握用户准确的心理情况，以此给出更加精确的建议。
              </p>
              <p></p>
              <a href="#" class="btn more-btn">从业者</a>
            </div>

          </div>

          <div class="col-lg-6 order-1 order-lg-2" data-aos="fade-up" data-aos-delay="200">
            <img src="{% static 'img/features-2.jpg' %}" class="img-fluid" alt="">
          </div>

        </div><!-- Features Item -->

      </div>

    </section><!-- /Features Details Section -->
    <!-- Services Section-->

    <!-- More Features Section -->
    <section id="more-features" class="more-features section">

      <div class="container">

        <div class="row justify-content-around gy-4">

          <div class="col-lg-6 d-flex flex-column justify-content-center order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">
            <h3>多模态AI集成</h3>
            <p>本系统集成了包括NLP，CV，LLM，ASR等多种AI技术，以确保本系统更能使用户接受，得出的信息更加准确，小帕表现更加自然。</p>

            <div class="row">

              <div class="col-lg-6 icon-box d-flex">
                <i class="bi bi-easel flex-shrink-0"></i>
                <div>
                  <h4>计算机视觉</h4>
                  <p>通过yolov8训练Fer2013表情数据集，得到yolov8表情识别模型，通过香橙派AI pro高效运行yolov8并将数据传至云服务器完成下一步处理。</p>
                </div>
              </div><!-- End Icon Box -->

              <div class="col-lg-6 icon-box d-flex">
                <i class="bi bi-patch-check flex-shrink-0"></i>
                <div>
                  <h4>自然语言处理</h4>
                  <p>使用基于Mindspore的SentimentNet实现情感分类，根据用户语言的情感分类结合加权算法判断用户给出的结果是否可信，增加准确度。</p>
                </div>
              </div><!-- End Icon Box -->

              <div class="col-lg-6 icon-box d-flex">
                <i class="bi bi-brightness-high flex-shrink-0"></i>
                <div>
                  <h4>语音识别</h4>
                  <p>通过MindSpore完成的轻量语音识别模型在香橙派AI Pro的环境下能基本确保0延迟，完成及时响应的需求。</p>
                </div>
              </div><!-- End Icon Box -->

              <div class="col-lg-6 icon-box d-flex">
                <i class="bi bi-brightness-high flex-shrink-0"></i>
                <div>
                  <h4>大语言模型</h4>
                  <p>通过部署在云服务器上的Chatglm3经过微调后能够细致引导用户说出自己想说的，让用户表达更加自然。</p>
                </div>
              </div><!-- End Icon Box -->

            </div>

          </div>

          <div class="features-image col-lg-5 order-1 order-lg-2" data-aos="fade-up" data-aos-delay="200">
            <img src="{% static 'img/features-3.jpg' %}" alt="">
          </div>

        </div>

      </div>

    </section><!-- /More Features Section -->

    <!-- Pricing Section -->
    <section id="pricing" class="pricing section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>价格</h2>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row gy-4">

          <div class="col-lg-4" data-aos="zoom-in" data-aos-delay="100">
            <div class="pricing-item">
              <h3>免费</h3>
              <p class="description">适合初次接触本项目的用户</p>
              <h4><sup>$</sup>0<span> / month</span></h4>
              <a href="#" class="cta-btn">免费开始</a>

              <ul>
                <li><i class="bi bi-check"></i> <span>基础的识别</span></li>
                <li><i class="bi bi-check"></i> <span>普通的分析</span></li>
                <li><i class="bi bi-check"></i> <span>分析数据的记录</span></li>
                <li class="na"><i class="bi bi-x"></i> <span>更加精细的分析</span></li>
                <li class="na"><i class="bi bi-x"></i> <span>生成独特的报告</span></li>
                <li class="na"><i class="bi bi-x"></i> <span>随时随地的操作</span></li>
                <li class="na"><i class="bi bi-x"></i> <span>独立服务器存储</span></li>
              </ul>
            </div>
          </div><!-- End Pricing Item -->

          <div class="col-lg-4" data-aos="zoom-in" data-aos-delay="200">
            <div class="pricing-item featured">
              <p class="popular">Popular</p>
              <h3>个人版</h3>
              <p class="description">为私人分析专业定制</p>
              <h4><sup>$</sup>29<span> / month</span></h4>
              <a href="#" class="cta-btn">免费开始</a>
              <ul>
                <li><i class="bi bi-check"></i> <span>基础的识别</span></li>
                <li><i class="bi bi-check"></i> <span>普通的分析</span></li>
                <li><i class="bi bi-check"></i> <span>分析数据的记录</span></li>
                <li><i class="bi bi-check"></i> <span>更加精细的分析</span></li>
                <li><i class="bi bi-check"></i> <span>生成独特的报告</span></li>
                <li class="na"><i class="bi bi-x"></i> <span>随时随地的操作</span></li>
                <li class="na"><i class="bi bi-x"></i> <span>独立服务器存储</span></li>
              </ul>
            </div>
          </div><!-- End Pricing Item -->

          <div class="col-lg-4" data-aos="zoom-in" data-aos-delay="300">
            <div class="pricing-item">
              <h3>专业版</h3>
              <p class="description">为更专业的心理咨询师设计</p>
              <h4><sup>$</sup>49<span> / month</span></h4>
              <a href="#" class="cta-btn">免费开始</a>
              <ul>
                <li><i class="bi bi-check"></i> <span>基础的识别</span></li>
                <li><i class="bi bi-check"></i> <span>普通的分析</span></li>
                <li><i class="bi bi-check"></i> <span>分析数据的记录</span></li>
                <li><i class="bi bi-check"></i> <span>更加精细的分析</span></li>
                <li><i class="bi bi-check"></i> <span>生成独特的报告</span></li>
                <li><i class="bi bi-check"></i> <span>随时随地的操作</span></li>
                <li><i class="bi bi-check"></i> <span>独立服务器存储</span></li>
              </ul>
            </div>
          </div><!-- End Pricing Item -->

        </div>

      </div>

    </section><!-- /Pricing Section -->

    <!-- Faq Section -->
    <section id="faq" class="faq section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>常见问题</h2>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row justify-content-center">

          <div class="col-lg-10" data-aos="fade-up" data-aos-delay="100">

            <div class="faq-container">

              <div class="faq-item faq-active">
                <h3>什么是PaSystem？</h3>
                <div class="faq-content">
                  <p>PaSystem是一款专为心理抚慰设计的数据分析和引导工具，旨在帮助用户从心理阴霾中走出来。</p>
                </div>
                <i class="faq-toggle bi bi-chevron-right"></i>
              </div><!-- End Faq item-->

              <div class="faq-item">
                <h3>如何开始使用PaSystem？</h3>
                <div class="faq-content">
                  <p>注册/登录账号后，通过导航栏进入“快速开始”，观看视频教程或阅读文档，了解基本操作。</p>
                </div>
                <i class="faq-toggle bi bi-chevron-right"></i>
              </div><!-- End Faq item-->

              <div class="faq-item">
                <h3>支持哪些设备？</h3>
                <div class="faq-content">
                  <p>任何设备，无论安卓还是苹果，都可以通过机器人传输的数据在网页上查看自己的数据。</p>
                </div>
                <i class="faq-toggle bi bi-chevron-right"></i>
              </div><!-- End Faq item-->

              <div class="faq-item">
                <h3>PaSystem如何保护我的数据安全？</h3>
                <div class="faq-content">
                  <p>我们采用加密传输、数据存储加密、访问控制等多重安全措施，确保用户数据的安全与隐私。</p>
                </div>
                <i class="faq-toggle bi bi-chevron-right"></i>
              </div><!-- End Faq item-->

            </div>

          </div><!-- End Faq Column-->

        </div>

      </div>

    </section><!-- /Faq Section -->

    <!-- Testimonials Section -->
<!--    <section id="testimonials" class="testimonials section light-background">-->

<!--      &lt;!&ndash; Section Title &ndash;&gt;-->
<!--      <div class="container section-title" data-aos="fade-up">-->
<!--        <h2>Testimonials</h2>-->
<!--        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>-->
<!--      </div>&lt;!&ndash; End Section Title &ndash;&gt;-->

<!--      <div class="container" data-aos="fade-up" data-aos-delay="100">-->

<!--        <div class="swiper init-swiper">-->
<!--          <script type="application/json" class="swiper-config">-->
<!--            {-->
<!--              "loop": true,-->
<!--              "speed": 600,-->
<!--              "autoplay": {-->
<!--                "delay": 5000-->
<!--              },-->
<!--              "slidesPerView": "auto",-->
<!--              "pagination": {-->
<!--                "el": ".swiper-pagination",-->
<!--                "type": "bullets",-->
<!--                "clickable": true-->
<!--              },-->
<!--              "breakpoints": {-->
<!--                "320": {-->
<!--                  "slidesPerView": 1,-->
<!--                  "spaceBetween": 40-->
<!--                },-->
<!--                "1200": {-->
<!--                  "slidesPerView": 3,-->
<!--                  "spaceBetween": 1-->
<!--                }-->
<!--              }-->
<!--            }-->
<!--          </script>-->
<!--          <div class="swiper-wrapper">-->

<!--            <div class="swiper-slide">-->
<!--              <div class="testimonial-item">-->
<!--                <div class="stars">-->
<!--                  <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>-->
<!--                </div>-->
<!--                <p>-->
<!--                  Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.-->
<!--                </p>-->
<!--                <div class="profile mt-auto">-->
<!--                  <img src="{% static 'img/testimonials/testimonials-1.jpg' %}" class="testimonial-img" alt="">-->
<!--                  <h3>Saul Goodman</h3>-->
<!--                  <h4>Ceo &amp; Founder</h4>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>&lt;!&ndash; End testimonial item &ndash;&gt;-->

<!--            <div class="swiper-slide">-->
<!--              <div class="testimonial-item">-->
<!--                <div class="stars">-->
<!--                  <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>-->
<!--                </div>-->
<!--                <p>-->
<!--                  Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.-->
<!--                </p>-->
<!--                <div class="profile mt-auto">-->
<!--                  <img src="{% static 'img/testimonials/testimonials-2.jpg' %}" class="testimonial-img" alt="">-->
<!--                  <h3>Sara Wilsson</h3>-->
<!--                  <h4>Designer</h4>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>&lt;!&ndash; End testimonial item &ndash;&gt;-->

<!--            <div class="swiper-slide">-->
<!--              <div class="testimonial-item">-->
<!--                <div class="stars">-->
<!--                  <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>-->
<!--                </div>-->
<!--                <p>-->
<!--                  Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.-->
<!--                </p>-->
<!--                <div class="profile mt-auto">-->
<!--                  <img src="{% static 'img/testimonials/testimonials-3.jpg' %}" class="testimonial-img" alt="">-->
<!--                  <h3>Jena Karlis</h3>-->
<!--                  <h4>Store Owner</h4>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>&lt;!&ndash; End testimonial item &ndash;&gt;-->

<!--            <div class="swiper-slide">-->
<!--              <div class="testimonial-item">-->
<!--                <div class="stars">-->
<!--                  <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>-->
<!--                </div>-->
<!--                <p>-->
<!--                  Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.-->
<!--                </p>-->
<!--                <div class="profile mt-auto">-->
<!--                  <img src="{% static 'img/testimonials/testimonials-4.jpg' %}" class="testimonial-img" alt="">-->
<!--                  <h3>Matt Brandon</h3>-->
<!--                  <h4>Freelancer</h4>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>&lt;!&ndash; End testimonial item &ndash;&gt;-->

<!--            <div class="swiper-slide">-->
<!--              <div class="testimonial-item">-->
<!--                <div class="stars">-->
<!--                  <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>-->
<!--                </div>-->
<!--                <p>-->
<!--                  Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.-->
<!--                </p>-->
<!--                <div class="profile mt-auto">-->
<!--                  <img src="{% static 'img/testimonials/testimonials-5.jpg' %}" class="testimonial-img" alt="">-->
<!--                  <h3>John Larson</h3>-->
<!--                  <h4>Entrepreneur</h4>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>&lt;!&ndash; End testimonial item &ndash;&gt;-->

<!--          </div>-->
<!--          <div class="swiper-pagination"></div>-->
<!--        </div>-->

<!--      </div>-->

<!--    </section>&lt;!&ndash; /Testimonials Section &ndash;&gt;-->

    <!-- Contact Section -->
<!--    <section id="contact" class="contact section">-->

<!--      &lt;!&ndash; Section Title &ndash;&gt;-->
<!--      <div class="container section-title" data-aos="fade-up">-->
<!--        <h2>Contact</h2>-->
<!--        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>-->
<!--      </div>&lt;!&ndash; End Section Title &ndash;&gt;-->

<!--      <div class="container" data-aos="fade-up" data-aos-delay="100">-->

<!--        <div class="row gy-4">-->

<!--          <div class="col-lg-6">-->
<!--            <div class="info-item d-flex flex-column justify-content-center align-items-center" data-aos="fade-up" data-aos-delay="200">-->
<!--              <i class="bi bi-geo-alt"></i>-->
<!--              <h3>Address</h3>-->
<!--              <p>A108 Adam Street, New York, NY 535022</p>-->
<!--            </div>-->
<!--          </div>&lt;!&ndash; End Info Item &ndash;&gt;-->

<!--          <div class="col-lg-3 col-md-6">-->
<!--            <div class="info-item d-flex flex-column justify-content-center align-items-center" data-aos="fade-up" data-aos-delay="300">-->
<!--              <i class="bi bi-telephone"></i>-->
<!--              <h3>Call Us</h3>-->
<!--              <p>+1 5589 55488 55</p>-->
<!--            </div>-->
<!--          </div>&lt;!&ndash; End Info Item &ndash;&gt;-->

<!--          <div class="col-lg-3 col-md-6">-->
<!--            <div class="info-item d-flex flex-column justify-content-center align-items-center" data-aos="fade-up" data-aos-delay="400">-->
<!--              <i class="bi bi-envelope"></i>-->
<!--              <h3>Email Us</h3>-->
<!--              <p>info@example.com</p>-->
<!--            </div>-->
<!--          </div>&lt;!&ndash; End Info Item &ndash;&gt;-->

<!--        </div>-->

<!--        <div class="row gy-4 mt-1">-->
<!--          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">-->
<!--&lt;!&ndash;            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48389.78314118045!2d-74.006138!3d40.710059!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a22a3bda30d%3A0xb89d1fe6bc499443!2sDowntown%20Conference%20Center!5e0!3m2!1sen!2sus!4v1676961268712!5m2!1sen!2sus" frameborder="0" style="border:0; width: 100%; height: 400px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>&ndash;&gt;-->
<!--          </div>&lt;!&ndash; End Google Maps &ndash;&gt;-->

<!--          <div class="col-lg-6">-->
<!--&lt;!&ndash;            <form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="400">&ndash;&gt;-->
<!--            <form method="post" class="row g-3">-->
<!--              <div class="row gy-4">-->

<!--                <div class="col-md-6">-->
<!--                  <input type="text" name="name" class="form-control" placeholder="姓名..." required="">-->
<!--                </div>-->

<!--                <div class="col-md-6 ">-->
<!--                  <input type="email" class="form-control" name="email" placeholder="邮箱..." required="">-->
<!--                </div>-->

<!--                <div class="col-md-12">-->
<!--                  <input type="text" class="form-control" name="subject" placeholder="职业..." required="">-->
<!--                </div>-->

<!--                <div class="col-md-12">-->
<!--                  <textarea class="form-control" name="message" rows="6" placeholder="想说点什么..." required=""></textarea>-->
<!--                </div>-->

<!--                <div class="col-md-12 text-center">-->
<!--                  <button type="submit" class="btn btn-primary mb-3">确认</button>-->
<!--                </div>-->

<!--              </div>-->
<!--            </form>-->
<!--          </div>&lt;!&ndash; End Contact Form &ndash;&gt;-->

<!--        </div>-->

<!--      </div>-->

<!--    </section>&lt;!&ndash; /Contact Section &ndash;&gt;-->

  </main>
{% endblock %}